<template>
  <div class="one">
    <div class="search-bar">
      <el-form :model="getParams" label-width="40px" style="padding: 0 30px;">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="编码" style="margin-bottom: 5px;">
              <el-input v-model="getParams.code" size="medium" @keyup.enter="handleSearch" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="名称" style="margin-bottom: 5px;">
              <el-input v-model="getParams.name" @keyup.enter="handleSearch" size="medium" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div style="margin-top: 3px;">
              <el-button icon="el-icon-search" type="primary" size="small" @click="handleSearch">查询</el-button>
               <el-button icon="el-icon-refresh-left" size="small" @click="handleClear">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div ref="ref" class="table-box">
      <Table
        :height="height"
        :data="tableData || []"
        :columns="countryColumns"
        :ifNoEditColumns="noEditcountryColumns"
        :table-option="tableOption"
      >
        <template scope="scope">
          <el-button v-if="scope.scope.row.isEditing" @click="saveRow(scope.scope.row)" type="text" size="mini">保存</el-button>
          <el-button v-if="scope.scope.row.isEditing" @click="cancleRow(scope.scope.row)" type="text" size="mini">取消</el-button>
          <template v-if="!scope.scope.row.isEditing">
            <el-button @click="editRow(scope.scope.row)" type="text" size="mini">编辑</el-button>
          </template>
        </template>
      </Table>
    </div>
  </div>
</template>

<script>
import Table from '@/components/Table/table'
import { countryColumns, noEditcountryColumns } from './index.js'
import { queryCountry, editCountry } from '@/api/modules/systemManage.js'
export default {
  components: {
    Table
  },
  data() {
    return {
      height: null,
      tableData: [],
      countryColumns,
      noEditcountryColumns,
      tableOption: {
        isShowOperate: true,
        operateWidth: '80px',
        NoInlineEdit: true
      },
      getParams: {
        code: '',
        name: ''
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.height = this.$refs.ref.offsetHeight - 60
    })
    window.onresize = () => {
      this.height = this.$refs.ref.offsetHeight - 60
    }
    this.initData(this.getParams)
  },
  destroyed(){
    window.onresize = null
  },
  methods: {
    initData(params) {
      queryCountry(params).then(res => {
        if (res.data.code === '200') {
          let data = res.data.data || []
          this.tableData = data.map(value => {
            return Object.assign({}, value, {isEditing: false})
          })
        }
      })
    },
    // 查询
    handleSearch() {
      this.initData(this.getParams)
    },
    handleClear() {
      this.getParams.code = ''
      this.getParams.name = ''
    },
    // 清空表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    saveRow(row) {
      const data = row
      editCountry(data).then(res => {
        if (res.data.code === '200') {
          this.$message.success('修改成功')
          row.isEditing = false
          this.initData(this.getParams)
        } else {
          this.$message.error('修改失败')
        }
      })
    },
    cancleRow(row) {
      row.isEditing = false
    },
    editRow(row) {
      console.log(row, 'edit')
      row.isEditing = true
    }
  }
}
</script>

<style lang="less" scoped>
  .one {
    height: calc(100vh - 145px);
    padding: 0 10px;
    .search-bar {
      width: 100%;
      margin-bottom: 10px;
      padding: 20px 0px;
      box-shadow: 0 1px 4px 0 rgba(0,21,41,.12);
      .search-item {
        display: flex;
        justify-content: center;
        align-items: center;
        .search-item-title {
          margin-right: 10px;
        }
      }
    }
    .table-box {
      width: 100%;
      height: calc(100% - 20px);
    }
  }

</style>
<style> 
  .table-row th {
    padding: 0 !important;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
</style>